<template>
    <div class="container">
        <div class="form-wrapper sign-in">
            <form @submit.prevent="onSignIn">
                <h2>登录</h2>
                <div class="input-group">
                    <input type="text" required v-model="username">
                    <label>用户名</label>
                </div>
                <div class="input-group">
                    <input type="password" required v-model="password">
                    <label>密码</label>
                </div>

                <button type="submit">登录</button>
                <div class="extra-options">
                    <router-link to="/request-reset">忘记密码？</router-link>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import 'element-plus/dist/index.css';

export default {
  data() {
    return {
      username: '',
      password: '',
      rememberMe: false
    };
  },
  setup() {
    const router = useRouter();
    return {router};
  },
  mounted() {
    document.title = '智慧课程平台'; // 设置浏览器标题
  },
  methods: {
    async onSignIn() {
      // 首先验证表单是否填写完整
      if (!this.username || !this.password) {
        ElMessage({
          message: '请填写完整的用户名和密码',
          type: 'warning',
          duration: 2000,
          center: true,
        });
        return;
      }

      try {
        const response = await axios.post('/backend/api/account/login/', {
          id: this.username,
          password: this.password
        }, {
          withCredentials: true
        });

        // 登录成功提示
        ElMessage({
          message: '登录成功！',
          type: 'success',
          duration: 2000,
          center: true,
        });

        sessionStorage.setItem('userProfile', JSON.stringify(response.data));
        console.log(JSON.stringify(response.data));

        // 延迟跳转，让用户看到成功提示
        setTimeout(() => {
          this.$router.push('/coursePlatformHomepage');
        }, 1000);

      } catch (error) {
        // 处理不同类型的错误
        let errorMessage = '登录失败，请稍后重试';

        if (error.response) {
          // 服务器返回错误状态码
          switch (error.response.status) {
            case 401:
              errorMessage = '用户名或密码错误，请重新登录';
              break;
          }
        } else if (error.request) {
          // 请求发送失败
          errorMessage = '网络连接失败，请检查您的网络';
        }

        ElMessage({
          message: errorMessage,
          type: 'error',
          duration: 3000,
          center: true,
        });

        console.error('Login failed:', error);
      }
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.form-wrapper {
  width: 400px;
  background: rgba(255, 255, 255, .2);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 0 50px rgba(0, 0, 0, .1);
  transition: transform 1s ease-in-out;
}


.input-group label {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transition: 0.5s;
  color: #fff;
}

.input-group input:focus ~ label,
.input-group input:valid ~ label {
  top: -20px;
  font-size: 12px;
}

.remember {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.remember label {
  color: #fff;
  font-size: 14px;
}

button {
  width: 100%;
  padding: 15px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 18px;
  cursor: pointer;
  border-radius: 30px;
  outline: none;
}

.extra-options {
  margin-top: 20px;
  text-align: center;
}

.extra-options a {
  color: #fff;
  text-decoration: none;
}

.extra-options a:hover {
  text-decoration: underline;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

body {
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

h2 {
    font-size: 30px;
    color: #fff;
    text-align: center;
}

.input-group {
    position: relative;
    margin: 45px 0;
    border-bottom: 2px solid #ffffff;
}

.input-group input {
    width: 320px;
    height: 40px;
    font-size: 16px;
    color: #ffffff;
    padding: 0 5px;
    background: transparent;
    border: none;
    outline: none;
}

.input-group label {
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
}

.remember {
    margin: -5px 0 15px 5px;
}

.remember label {
    color: #ffffff;
    font-size: 14px;
}

.remember label input {
    accent-color: rgba(255, 255, 255, 0.2);
}



.SignUp-link p, .SignUp-link a {
    color: #ffffff;
    text-align: center;
}

.SignUp-link a {
    color: rgba(255, 255, 255, 0.2);
    text-decoration: none;
    font-weight: 500;
}

.SignUp-link a:hover {
    text-decoration: underline;
}
</style>